<template>
	<view class="parttimebox1">
		<view class="parttimebox">
			<!-- 左边部分 -->
			<view class="left">
				<!-- 兼职标题 -->
				<view class="title">
					{{ item.parttimeTitle }}	
				</view>
				<!-- 地址 -->
				<view class="address">
					<image src="../../static/images/address.png" class="addressLogo"></image>
					{{ item.parttimeSeat }}
				</view>
				<!-- 标签 -->
				<view class="label">
					<view v-for="i in item.parttimeLable" class="labelItem">{{ i }}</view>
				</view>
			</view>
			<!-- 右边部分 -->
			<view class="right">
				<!-- 时间 -->
				<!-- <view class="time">{{ item.startTime }} 至 {{ item.endTime }}</view> -->
				<view class="salary">{{ item.parttimeMoney }} 元/月</view>
			</view>
		</view>
		<view class="divider"></view>
	</view>
	
</template>

<script>
	export default {
		name:"parttimebox",
		props:{
			item:{
				type:Object,
				default(){
					return {
						title:"兼职标题",
						startTime:"2023-03-09",
						endTime:"2023-03-09",
						address:"成都",
						salary:"1213",
						label: ["保住", "包吃"]
					}
				}
			}
		},
		data() {
			return {
				
			};
		},
		onLoad() {
			console.log(this.item)
		}
	}
</script>

<style lang="scss">
	.parttimebox1 {
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}
	.parttimebox {
		display: flex;
		justify-content: space-between;
		.title {
			font-size: 35rpx;
		}
		.address {
			color: gray;
			font-size: 30rpx;
			display: flex;
			align-items: flex-end;
			.addressLogo {
				height: 25rpx;
				width: 25rpx;
			}
		}
		.label {
			display: flex;
			justify-content: space-between;
			
			.labelItem {
				margin: 8rpx;
				color: white;
				font-size: 24rpx;
				background-color: #D19A66;
				width: 100%;
				height: 30rpx;
				text-align: center;
			}
		}
		
		.right {
			.time {
				font-size: 24rpx;
			}
			.salary {
				font-size: 40rpx;
				color: green;
				margin-top: 10rpx;
				float: right;
			}
		}
	}
	.divider{
		 background: gray;
		 width: 100%;
		 height: 2rpx;
	}
	

</style>